{{template "_head.html" .}}

<body ontouchstart="">
    <div class="weui-tab">
        <!-- 容器 -->
        <div class="weui-tab">
              <div class="weui-tab__bd">
                <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">

                    <div class="weui-search-bar" id="searchBar" style="height:50px;">
                      <form class="weui-search-bar__form">
                        <div class="weui-search-bar__box">
                          <i class="weui-icon-search"></i>
                          <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
                          <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                        </div>
                        <label class="weui-search-bar__label" id="searchText">
                          <i class="weui-icon-search"></i>
                          <span>搜索</span>
                        </label>
                      </form>
                      <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
                    </div>
                    <div class="weui-panel__bd" id="userlist"></div>
                    
                </div>
                <div id="tab2" class="weui-tab__bd-item">
                  <a href="javascript:;" id="show-prompt" class="weui-btn weui-btn_default">点击创建群聊房间</a>
                  <div class="weui-cells__title">当前聊天室</div>
                  <div id="roomlist"> </div>

                </div>
                <div id="tab3" class="weui-tab__bd-item">

                  <div style="width: 100%;height: 300px;text-align: center;padding-top: 28px;">
                      <img class="weui-media-box__thumb" src="{{.myInfo.img}}" alt="" style="width: 128px;">
                      <h3>User : {{.user}}</h3>
                      <span>创建时间: {{.myInfo.date}}</span>

                  </div>

                  <a href="javascript:;" id="a" class="weui-btn weui-btn_default">这是一个发送消息的测试按钮</a>
                  <a href="/loginout" class="weui-btn weui-btn_default"> 退出 </a>

                </div>
                <div id="tab4" class="weui-tab__bd-item">
                  <h1>页面四</h1>
                </div>
              </div>

              <div class="weui-tabbar">
                <a href="#tab1" class="weui-tabbar__item weui-bar__item--on">
                  <div id="unmsg_num"></div>
                  <div class="weui-tabbar__icon">
                    <img src="https://jqweui.cn/dist/demos/images/icon_nav_actionSheet.png" alt="">
                  </div>
                  <p class="weui-tabbar__label">聊天</p>
                </a>
                <a href="/anonymity" class="weui-tabbar__item">
                  <div class="weui-tabbar__icon">
                    <img src="https://jqweui.cn/dist/demos/images/icon_nav_panel.png" alt="">
                  </div>
                  <p class="weui-tabbar__label">匿名聊天室</p>
                </a>
                <a href="#tab2" class="weui-tabbar__item">
                  <div class="weui-tabbar__icon">
                    <img src="https://jqweui.cn/dist/demos/images/icon_nav_cell.png" alt="">
                  </div>
                  <p class="weui-tabbar__label">群聊</p>
                </a>
                <a href="#tab3" class="weui-tabbar__item">
                  <div class="weui-tabbar__icon">
                    <img src="https://jqweui.cn/dist/demos/images/icon_nav_button.png" alt="">
                  </div>
                  <p class="weui-tabbar__label">我的</p>
                </a>
              </div>
        </div>

</div>

<script type="text/javascript">

function UserShow(name,online,unmsg,img,time) {

    var unmsg_html = "";
    if (unmsg != ""){
        unmsg_html = '<span class="weui-badge" style="position: absolute;top: 0.4em;right: 0.4em;">'+unmsg+'</span>'
    }

    console.log(unmsg_html);

    var online_str = "离开"
    if (online){
      online_str = "在线"
    }

    var data = '<a href="/onebyone?you_name='+name+'" class="weui-media-box weui-media-box_appmsg">'+
           '    <div class="weui-media-box__hd">'+
           '        <img class="weui-media-box__thumb" src="'+img+'" alt="">'+
           unmsg_html+
           '    </div>'+
           '    <div class="weui-media-box__bd">'+
           '        <h4 class="weui-media-box__title">'+
           '            '+name+' （'+online_str+'）'+
           '            <span class="weui-media-box__title-after"></span>'+
           '        </h4>'+
           '    <p class="weui-media-box__desc">上线时间: '+time+'</p>'+
           '    </div>'+
           '</a>';
    return data
}

function RoomShow(room_name, time){
    var data = '<a href="/room?room_name='+room_name+'" class="weui-media-box weui-media-box_appmsg">'+
               '      <div class="weui-media-box__bd">'+
               '          <h4 class="weui-media-box__title">'+room_name+'</h4>'+
               '      <p class="weui-media-box__desc"> 创建时间: '+time+'</p>'+
               '      </div>'+
               '   </a>';
    return data
}

window.onload = function () {
    var conn;

    $("#a").click(function () {
        if (!conn) {
            return false;
        }
        conn.send("asdasdsadsad");
        return false;
    });
    
    //创建群聊房间
    $("#show-prompt").click(function(){
      $.prompt({
          text: "",
          title: "创建群聊房间",
          onOK: function(text) {
            var room_name = text;
            if (room_name === "") {
              alert("room name is null.");
              return
            }
            $.ajax({
              type : "GET",
              url : "/create/room?room_name="+room_name,
              success : function(result) {//返回数据根据结果进行相应的处理 
                  console.log(result);
                } 
            });
          },
          onCancel: function() {
            console.log("取消了");
          },
          input: ''
        });
    });


    if (window["WebSocket"]) {
        var name = "{{.user}}";
        conn = new WebSocket("ws://" + document.location.host + "/ws/index?name="+name);

        conn.onclose = function (evt) {
            //alert("连接断开");
            console.log("连接断开");
        };
        conn.onmessage = function (evt) {
            var messages = evt.data.split('\n');
            var str = messages[0];
            var obj = JSON.parse(str);

            //当前聊天用户
            var user_list_data = obj["user_list"];
            console.log(user_list_data);
            var user_div = $("#userlist");
            user_div.empty();
            for (var i = 0; i < user_list_data.length; i ++) {
                if (name === user_list_data[i]["user_name"]){
                    continue;
                }
                user_div.append( UserShow( user_list_data[i]["user_name"], user_list_data[i]["online"],
                   user_list_data[i]["unmsg"],  user_list_data[i]["img"], user_list_data[i]["login_time"] ) );
            }

            //未读消息
            $("#unmsg_num").empty();
            if (obj["msg_count"] != 0){
              
              $("#unmsg_num").append('<span class="weui-badge"  style="position: absolute;top: -.4em;right: 1em;">'+obj["msg_count"]+'</span>')
            }

            

            //当前聊天室
            var room_list_data = obj["room_list"];
            var room_div = $("#roomlist");
            room_div.empty();
            for (var i = 0; i < room_list_data.length; i ++) {

                room_div.append(RoomShow(room_list_data[i]["room_name"], room_list_data[i]["time"]));
            }
        };
    } else {
    	alert("你当前使用的浏览器不支持即使聊天，请更新或更换浏览器.");
    }

};


function CreateRoom(){
	var room_name = $("#room_name").val();
	if (room_name === "") {
		alert("room name is null.");
		return
	}
	$.ajax({
		type : "GET",
		url : "/create/room?room_name="+room_name,
		success : function(result) {//返回数据根据结果进行相应的处理 
	    	console.log(result);
        $.toast("纯文本", "text");
        alert("aaa");
	    } 
	});
}
</script>
</body>
</html>